<template>
	<div class="doc_pc_components_Icon_Example">
		<Icon
			v-for="(icon,index) in icons"
			:key="index"
			:name="icon"
			@click="copyFn(icon)"
		/>
	</div>
</template>

<script setup>
import {Icon,util} from 'powerful-ui/pc-default';
import content from 'bootstrap-icons/font/bootstrap-icons.css?source';

const icons=content.match(/bi-[^"\]\n]+(?=::)/mg);
const {copyToClipboard}=util;

function copyFn(icon){
	copyToClipboard(`<Icon name="${icon}"/>`);
}
</script>

<style lang="scss">
.doc_pc_components_Icon_Example{
	padding:5px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-content:flex-start;
	>.pf-Icon{
		border-radius:4px;
		margin:5px;
		padding:8px;
		font-size:24px;
		cursor:pointer;
		&:hover{
			color:#2d8cf0;
			background:#eee;
		}
	}
}
</style>